<f:if condition="{accessAllowed}">
    <f:then>
        <div class="card-container">
            <div class="card">

                <div class="card-header">
                    <div class="card-icon">
                        {icon -> f:format.raw()}
                    </div>

                    <div class="card-header-body">
                        <h1 class="card-title">{title -> f:format.crop(maxCharacters: maxTitleLength)} [{extraFields.uid.fieldLabel}: {extraFields.uid.value}]</h1>
                        <f:if condition="{table}">
                            <span class="card-subtitle">{table}</span>
                        </f:if>
                    </div>
                </div>

                <div class="card-content">
                    <div class="row">
                        <f:for each="{extraFields}" as="extraField">
                            <f:if condition="{extraField.isDatetime}">
                                <div class="col-md-6">
                                    <strong>{extraField.fieldLabel}</strong><br>
                                    {extraField.value}
                                </div>
                            </f:if>
                        </f:for>
                    </div>
                    <f:if condition="{extraFields.creatorRecord}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="media">
                                    <div class="media-left">
                                        {extraFields.creatorRecord.value.icon -> f:format.raw()}
                                    </div>
                                    <div class="media-body">
                                        <strong>{extraFields.creatorRecord.value.username}</strong><br>
                                        {extraFields.creatorRecord.value.realName}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </f:if>
                </div>
            </div>
        </div>


        <f:if condition="{missingFile}">
            <f:be.infobox title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:warning.file_missing')}" state="1">{missingFile}</f:be.infobox>
        </f:if>
        <f:if condition="{fileRenderer}">
            <p>
                {fileRenderer -> f:format.raw()}
            </p>
        </f:if>
        <f:if condition="{fileObject}">
            <p>
                <f:media file="{fileObject}"
                                width="{width}"
                                height="{height}"
                />
            </p>
        </f:if>
        <f:if condition="{url}">
            <p>
                <a class="btn btn-default" href="{url}" target="_blank" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.show')}">
                    <core:icon identifier="actions-document-view" size="small" alternativeMarkupIdentifier="inline" />
                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.show" />
                </a>
            </p>
        </f:if>
        <div class="table-fit table-fit-wrap">
            <table class="table table-striped table-hover">
                <f:for each="{fields}" as="field">
                    <f:render section="fieldRow" arguments="{row: field}" />
                </f:for>
            </table>
        </div>
        <f:if condition="{returnUrl}">
            <a class="btn btn-primary" href="{returnUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:back')}">
                <core:icon identifier="actions-view-go-back" size="small" />
                <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:back" />
            </a>
        </f:if>
        <f:if condition="{refLines}">
            <h3><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.referencesToThisItem" /></h3>
            <div class="table-fit">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th class="col-icon"></th>
                        <th class="col-title"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.title" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.table" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.uid" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.path" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.field" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.flexpointer" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.softrefKey" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.sorting" /></th>
                        <th class="col-control"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <f:for each="{refLines}" as="refLine">
                        <f:render section="refLineRow" arguments="{line: refLine, maxTitleLength: maxTitleLength}" />
                    </f:for>
                    </tbody>
                </table>
            </div>
        </f:if>
        <f:if condition="{refFromLines}">
            <h3><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.referencesFromThisItem" /></h3>
            <div class="table-fit">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th class="col-icon"></th>
                        <th class="col-title"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.title" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.table" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.uid" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.path" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.field" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.flexpointer" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.softrefKey" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.sorting" /></th>
                        <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.refString" /></th>
                        <th class="col-control"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <f:for each="{refFromLines}" as="refFromLine">
                        <f:render section="refFromLineRow" arguments="{line: refFromLine, maxTitleLength: maxTitleLength}" />
                    </f:for>
                    </tbody>
                </table>
            </div>
        </f:if>
    </f:then>
    <f:else>
        <f:be.infobox state="2">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.noEditPermission')}</f:be.infobox>
    </f:else>
</f:if>

<f:section name="fieldRow">
    <tr>
        <th class="col-nowrap">{row.fieldLabel}</th>
        <td>{row.fieldValue}</td>
    </tr>
</f:section>

<f:section name="refLineRow">
    <tr>
        <f:if condition="{line.record}">
            <f:then>
                <td class="col-icon"><a href="{line.url}" title="id={line.record.uid}">{line.icon -> f:format.raw()}</a></td>
                <td class="col-title"><a href="{line.url}" title="[id={line.record.uid}] {line.recordTitle}">{line.recordTitle -> f:format.crop(maxCharacters: maxTitleLength)}</a></td>
                <td>{line.title}</td>
                <td><span title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:page')}: {line.parentRecordTitle} (uid={line.record.pid})">
                        {line.record.uid}
                    </span></td>
            </f:then>
            <f:else>
                <td class="col-icon"></td>
                <td class="col-title"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.missing_record" /> (uid={line.row.recuid}</td>
                <td>{line.row.title}</td>
                <td></td>
            </f:else>
        </f:if>
        <td title="{line.path}" class="col-responsive">{line.path}</td>
        <td>{line.labelForTableColumn}</td>
        <td>{line.row.flexpointer}</td>
        <td>{line.row.softref_key}</td>
        <td>{line.row.sorting}</td>
        <td class="col-control">
            <f:render section="action" arguments="{line: line.actions}" />
        </td>
    </tr>
</f:section>

<f:section name="refFromLineRow">
    <tr>
        <f:if condition="{line.record}">
            <f:then>
                <td class="col-icon"><a href="{line.url}" title="id={line.record.uid}">{line.icon -> f:format.raw()}</a></td>
                <td class="col-title"><a href="{line.url}" title="[id={line.record.uid}] {line.recordTitle}">{line.recordTitle -> f:format.crop(maxCharacters: maxTitleLength)}</a></td>
                <td>{line.title}</td>
                <td>{line.row.ref_uid}</td>
            </f:then>
            <f:else>
                <td class="col-icon"></td>
                <td class="col-title"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.missing_record" /> (uid={line.row.recuid}</td>
                <td>{line.row.title}</td>
                <td></td>
            </f:else>
        </f:if>
        <td title="{line.path}" class="col-responsive">{line.path}</td>
        <td>{line.labelForTableColumn}</td>
        <td>{line.row.flexpointer}</td>
        <td>{line.row.softref_key}</td>
        <td>{line.row.sorting}</td>
        <td>{line.row.ref_string}</td>
        <td class="col-control">
            <f:render section="action" arguments="{line: line.actions}" />
        </td>
    </tr>
</f:section>

<f:section name="action">
    <div class="btn-group" role="group">
        <f:if condition="{line.webListUrl}">
            <a class="btn btn-default btn-sm" href="#" onclick="{line.viewOnClick}" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.showPage')}">
                <core:icon identifier="actions-document-view" size="small" />
            </a>
        </f:if>
        <a class="btn btn-default btn-sm" href="{line.recordEditUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.edit')}">
            <core:icon identifier="actions-open" size="small" />
        </a>
    </div>
    <div class="btn-group" role="group">
        <a class="btn btn-default btn-sm" href="{line.recordHistoryUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.history')}">
            <core:icon identifier="actions-document-history-open" size="small" />
        </a>
    </div>
    <f:if condition="{line.webListUrl}">
        <div class="btn-group" role="group">
            <a class="btn btn-default btn-sm" href="{line.webListUrl}" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.showList')}">
                <core:icon identifier="actions-system-list-open" size="small" />
            </a>
        </div>
    </f:if>
</f:section>
